<template>
  <el-menu 
    :default-active="$route.path" 
    router
    class="el-menu-top" 
    mode="horizontal" 
    background-color="#0658A2"
    text-color="#fff"
    active-text-color="#fff"
    @select="handleSelect">
      <el-submenu index="a1">
        <template slot="title">能源看板</template>
        <el-menu-item index="/home"><i class="el-icon-arrow-right" style="font-size:12px;"></i>综合看板</el-menu-item>
        <el-menu-item index="/electricboard"><i class="el-icon-arrow-right" style="font-size:12px;"></i>用电看板</el-menu-item>
        <el-menu-item index="/waterboard"><i class="el-icon-arrow-right" style="font-size:12px;"></i>用水看板</el-menu-item>
		<el-menu-item index="/gasboard"><i class="el-icon-arrow-right" style="font-size:12px;"></i>用气看板</el-menu-item>
      </el-submenu>
      <el-submenu index="/energyanalysis">
        <template slot="title">能源分析</template>
        <el-menu-item index="/energyanalysis/department"><i class="el-icon-arrow-right textsize"></i>部门用能分析</el-menu-item>
        <!-- <el-menu-item index="/energyanalysis/craft"><i class="el-icon-arrow-right textsize"></i>工艺用能分析</el-menu-item> -->
        <el-menu-item index="/energyanalysis/keynotedevice"><i class="el-icon-arrow-right textsize"></i>重点设备用能分析</el-menu-item>
		<el-menu-item index="/energyanalysis/focusdevices"><i class="el-icon-arrow-right textsize"></i>关注设备用能分析</el-menu-item>
      </el-submenu>
      <el-submenu index="3">
          <template slot="title">仪表管理</template>
          <el-menu-item index="/device/list">仪表管理</el-menu-item>  
          <el-menu-item index="/device/virtualDevice">虚拟表配置</el-menu-item>
		  <el-menu-item index="/device/gatewayService">网关串服查询</el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">抄表管理</template>
        <el-menu-item index="/meter/reading/realtime"><i class="el-icon-arrow-right" style="font-size:12px;"></i>实时抄表</el-menu-item>
        <el-menu-item index="/meter/reading/history"><i class="el-icon-arrow-right" style="font-size:12px;"></i>历史抄表</el-menu-item>
		    <el-menu-item index="/meter/nightdayEnergy"><i class="el-icon-arrow-right" style="font-size:12px;"></i>夜白班能耗统计</el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">能源计费</template>
        <el-menu-item index="/energybilling/order"><i class="el-icon-arrow-right" style="font-size:12px;"></i>订单管理</el-menu-item>
        <el-menu-item index="/energybilling/billingRegistration"><i class="el-icon-arrow-right" style="font-size:12px;"></i>供能部门计量计费登记</el-menu-item>
        <el-menu-item index="/energybilling/comprehensiveBilling"><i class="el-icon-arrow-right" style="font-size:12px;"></i>能源综合计费</el-menu-item>
        <el-menu-item index="/devicecharge/devicecharge"><i class="el-icon-arrow-right" style="font-size:12px;"></i>计费标准管理</el-menu-item>
      </el-submenu>
      <el-submenu index="6">
        <template slot="title">能流管理</template>
        <!--<el-menu-item index="/energyflow/electricEnergy"><i class="el-icon-arrow-right" style="font-size:12px;"></i>电能流图</el-menu-item>
        <el-menu-item index="/energyflow/hydroenergy"><i class="el-icon-arrow-right" style="font-size:12px;"></i>水能流图</el-menu-item>
        <el-menu-item index="/energyflow/qiEnergy"><i class="el-icon-arrow-right" style="font-size:12px;"></i>气能流图</el-menu-item>-->
        <el-menu-item index="/energyflow/simpleDiagram"><i class="el-icon-arrow-right" style="font-size:12px;"></i>能源流向图</el-menu-item>
        <!-- <el-menu-item index="/energyflow/balanceAnalysis"><i class="el-icon-arrow-right" style="font-size:12px;"></i>能流平衡分析</el-menu-item> -->
		<el-menu-item index="/energyflow/energyloss"><i class="el-icon-arrow-right" style="font-size:12px;"></i>能源损耗</el-menu-item>
		<el-menu-item index="/energyflow/lossapportion"><i class="el-icon-arrow-right" style="font-size:12px;"></i>损耗分摊</el-menu-item>
      </el-submenu>
      <!-- <el-menu-item index="/monitor/powerMonitoring">配电监控</el-menu-item> -->
      <el-submenu index="8">
        <template slot="title">报表管理</template>
        <el-menu-item index="/report/energyReport"><i class="el-icon-arrow-right" style="font-size:12px;"></i>能耗报表</el-menu-item>
        <el-menu-item index="/report/expenseReport"><i class="el-icon-arrow-right" style="font-size:12px;"></i>费用报表</el-menu-item>
        <el-menu-item index="/report/orderReport"><i class="el-icon-arrow-right" style="font-size:12px;"></i>订单报表</el-menu-item>
		<el-menu-item index="/report/energyLossCollect"><i class="el-icon-arrow-right" style="font-size:12px;"></i>部门分摊报表</el-menu-item>
      </el-submenu>
      <el-menu-item index="/message/index">消息中心</el-menu-item>
    </el-menu>
</template>

<script>
export default {
  name: "SideMenu",
   data() {
    return {
      activeIndex:'a1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      //console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo {
  height: 100%;
}

.el-menu-item.is-active {
  background-color: #0BB976 !important;
  color:#ffffff!important;
}
.el-menu-item.is-active.el-submenu__title{
  background: #0BB976 !important;
  color:#ffffff!important;
}
.el-submenu{
  background-color: #0BB976 !important;
  color:#ffffff!important;
}
</style>
